import React, { Component } from 'react';
import './Personal.css';
import { Route } from 'react-router-dom';
import Logtrue from './Logtrue'
import Logfalse from './Logfalse'
//先进行路由校验=>是否登陆{查看window.localstorage是否存在并且发送后台请求}
class Personal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLogin: false,
            profile: {},
            createList: [],
            collectList: []
        }
        if (window.localStorage.length && window.localStorage.phone && window.localStorage.password) {
            let str = '?phone=' + window.localStorage.phone + '&password=' + window.localStorage.password
            fetch('http://106.12.79.128:666/login/cellphone' + str).then(res => res.json())
                .then(res => {
                    if (res.code == 200) {
                        this.setState({ isLogin: true, profile: res.profile });
                        let userId = res.profile.userId;
                        let newstr = str + '&uid=' + res.profile.userId
                        fetch('http://106.12.79.128:666/user/playlist' + newstr).then(res => res.json())
                            .then(res => {
                                let createList = res.playlist.filter(item => {
                                    return item.userId == userId
                                });
                                let collectList = res.playlist.filter(item => {
                                    return item.userId != userId
                                });
                                this.setState({ createList, collectList })
                            })
                    }
                }).catch(err => console.log(err));
        }
    }
    handlerClick(id){
        this.props.history.push('/playlist?id='+id)
    }
    render() {
        return (
            <div className='personal-container'>
                <Route path='/personal' render={
                    () => {
                        if (this.state.isLogin) {
                            return (
                                <div className='personal-isLogin'>
                                    <Logtrue {...this.state} />
                                </div>
                            )
                        } else {
                            return (
                                <div className='personal-isLogin'>
                                    <Logfalse />
                                </div>
                            )
                        }
                    }
                } />
                <div className='personal-songList'>
                    <div className='personal-songList-create'>
                        <div className='personal-songList-create-title'>
                            创建的歌单
                        </div>
                        <div className='personal-songList-create-content' style={{ display: this.state.createList.length ? 'block' : 'none' }}>
                            {this.state.createList.map((item, index) => {
                                // item.id 为歌单id 点击事件
                                if (index == 0) {
                                    return <div className='personal-songList-create-content-li' key={index} onClick={this.handlerClick.bind(this,item.id)}> 
                                        <img className='personal-songList-create-content-img' src={item.coverImgUrl} />
                                        <div className='personal-songList-create-content-text'>
                                            <div className='personal-songList-create-content-text1'>我喜欢的音乐</div>
                                            <div className='personal-songList-create-content-text2'>{item.trackCount}首</div>
                                        </div>
                                    </div>
                                }
                                return (
                                    <div className='personal-songList-create-content-li' key={index} onClick={this.handlerClick.bind(this,item.id)}>
                                        <img className='personal-songList-create-content-img' src={item.coverImgUrl} />
                                        <div className='personal-songList-create-content-text'>
                                            <div className='personal-songList-create-content-text1'>{item.name}</div>
                                            <div className='personal-songList-create-content-text2'>{item.trackCount}首</div>
                                        </div>
                                    </div>
                                )
                            })}
                        </div>
                        <div className='personal-songList-create-content-null' style={{ display: !this.state.createList.length ? 'block' : 'none' }}>
                            亲!没有数据哦,是不是没有登录啊
                        </div>
                    </div>
                    <div className='personal-songList-collect'>
                        <div className='personal-songList-collect-title'>
                            收藏的歌单
                        </div>
                        <div className='personal-songList-collect-content' style={{ display: this.state.collectList.length ? 'block' : 'none' }}>
                            {this.state.collectList.map((item, index) => {
                                // item.id 为歌单id 点击事件
                                return (
                                    <div className='personal-songList-collect-content-li' key={index} onClick={this.handlerClick.bind(this,item.id)}>
                                        <img className='personal-songList-collect-content-img' src={item.coverImgUrl} />
                                        <div className='personal-songList-collect-content-text'>
                                            <div className='personal-songList-collect-content-text1'>{item.name}</div>
                                            <div className='personal-songList-collect-content-text2'>{item.trackCount}首 by {item.creator.nickname}</div>
                                        </div>
                                    </div>
                                )
                            })}
                        </div>
                        <div className='personal-songList-collect-content-null' style={{ display: !this.state.collectList.length ? 'block' : 'none' }}>
                            亲!没有数据哦,快去收藏喜欢的歌单吧
                        </div>
                    </div>
                </div>
            </div>

        );
    }
}

export default Personal;